<template>
	<view class="form-container">
		<view class="form-header">
			<text class="form-title">填写信息</text>
			<text class="form-subtitle">请填写您的个人信息，参与抽奖</text>
		</view>
		
		<form @submit="submitForm" class="form-content">
			<view class="form-item">
				<text class="label">姓名</text>
				<input type="text" v-model="formData.name" placeholder="请输入姓名" class="input" />
			</view>
			
			<view class="form-item">
				<text class="label">公司名称</text>
				<input type="text" v-model="formData.companyName" placeholder="请输入公司名称" class="input" />
			</view>
			
			<view class="form-item">
				<text class="label">职位</text>
				<input type="text" v-model="formData.position" placeholder="请输入职位" class="input" />
			</view>
			
			<view class="form-item">
				<text class="label">手机号</text>
				<input type="number" v-model="formData.phone" placeholder="请输入手机号" class="input" />
			</view>
			
			<view class="form-item">
				<text class="label">邮箱</text>
				<input type="text" v-model="formData.email" placeholder="请输入邮箱（选填）" class="input" />
			</view>
			
			<view class="form-item">
				<text class="label">感兴趣的产品类别</text>
				<picker mode="selector" @change="handleProductCategoryChange" :value="productCategoryIndex" :range="productCategories" class="picker">
					<view class="picker-content">
						<text class="picker-text">{{ formData.productCategory || '请选择产品类别' }}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			
			<view class="privacy-agreement">
				<text class="privacy-text">查看</text>
				<text class="privacy-link" @click="goToPrivacy">《隐私协议》</text>
			</view>
			
			<button class="submit-btn" type="primary" @click="submitForm">提交信息并抽奖</button>
		</form>
	</view>
</template>

<script>
import config from '@/config.js'

export default {
	data() {
		return {
			formData: {
				name: '',
				companyName: '',
				position: '',
				phone: '',
				email: '',
				productCategory: ''
			},
			productCategories: ['医疗器械', '农药', '医药', '化学品', '化妆品', '危化品', '其他'],
			productCategoryIndex: 0,
			config: config
		}
	},
	methods: {
		handleProductCategoryChange(e) {
			this.productCategoryIndex = e.detail.value
			this.formData.productCategory = this.productCategories[e.detail.value]
		},
		goToPrivacy() {
			uni.navigateTo({
				url: '/pages/privacy/privacy'
			})
		},
		async submitForm() {
			// 检查是否已同意隐私协议
			const hasAgreed = uni.getStorageSync('privacyAgreed')
			if (!hasAgreed) {
				uni.showToast({
					title: '请先同意隐私协议',
					icon: 'none'
				})
				return
			}
			
			if (!this.formData.name || !this.formData.companyName || !this.formData.position || !this.formData.phone || !this.formData.productCategory) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				})
				return
			}
			
			try {
				const response = await uni.request({
					url: this.config.baseUrl + '/user/submit',
					method: 'POST',
					data: this.formData
				})
				
				if (response.statusCode === 200) {
					uni.setStorageSync('userInfo', {
						name: this.formData.name,
						phone: this.formData.phone,
						companyName: this.formData.companyName,
						position: this.formData.position,
						productCategory: this.formData.productCategory
					})
					
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/lottery/lottery'
						})
					}, 1500)
				} else {
					let errorMsg = '提交失败，请重试'
					try {
						const errorData = response.data
						if (errorData && errorData.message) {
							errorMsg = errorData.message
						}
					} catch (e) {
						console.error('解析错误响应失败:', e)
					}
					
					uni.showToast({
						title: errorMsg,
						icon: 'none',
						duration: 2000
					})
				}
			} catch (error) {
				console.error('提交表单错误:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style>
.form-container {
	padding: 30rpx;
	background-color: #ffffff;
	min-height: 100vh;
}

.form-header {
	margin-bottom: 40rpx;
}

.form-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.form-subtitle {
	font-size: 28rpx;
	color: #666;
}

.form-content {
	width: 100%;
}

.form-item {
	margin-bottom: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.input {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.picker {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	box-sizing: border-box;
}

.picker-content {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
}

.picker-text {
	font-size: 28rpx;
	color: #333;
}

.picker-arrow {
	font-size: 24rpx;
	color: #999;
}

.privacy-agreement {
	margin: 30rpx 0;
	text-align: center;
}

.privacy-text {
	font-size: 26rpx;
	color: #666;
}

.privacy-link {
	color: #4a90e2;
	margin-left: 4rpx;
}

.submit-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(to right, #4a90e2, #357abd);
	color: white;
	border-radius: 45rpx;
	font-size: 32rpx;
	margin-top: 40rpx;
}
</style> 